<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="jquery.dnd-file-upload.js" ></script>
		<script src="jquery.client.js" ></script>
		<script src="utils.js" ></script>
		<script>
			$(document).ready(function(){

				$.fn.dropzone.uploadStarted = function(fileIndex, file){
					var infoDiv = $("<div></div>");
					infoDiv.attr("id", "dropzone-info" + fileIndex);
					infoDiv.html("upload started: " + file.fileName);
					
					var progressDiv = $("<div></div>");
					progressDiv.css({
						'background-color': 'orange',
						'height': '20px',
						'width': '0%'
					});
					progressDiv.attr("id", "dropzone-speed" + fileIndex);

					var fileDiv = $("<div></div>");
					fileDiv.addClass("dropzone-info");
					fileDiv.css({
						'border' : 'thin solid black',
						'margin' : '5px'
					});
					fileDiv.append(infoDiv);				
					fileDiv.append(progressDiv);				
					
					$("#dropzone-info").after(fileDiv);
				};
				$.fn.dropzone.uploadFinished = function(fileIndex, file, duration){
					$("#dropzone-info" + fileIndex).html("upload finished: " + file.fileName + " ("+getReadableFileSizeString(file.fileSize)+") in " + (getReadableDurationString(duration)));
					$("#dropzone-speed" + fileIndex).css({
						'width': '100%',
						'background-color': 'green' 
					});
				};
				$.fn.dropzone.fileUploadProgressUpdated = function(fileIndex, file, newProgress){
					$("#dropzone-speed" + fileIndex).css("width", newProgress + "%");
				};
				$.fn.dropzone.fileUploadSpeedUpdated = function(fileIndex, file, KBperSecond){
					var dive = $("#dropzone-speed" + fileIndex);

					dive.html( getReadableSpeedString(KBperSecond) );
				};
				$.fn.dropzone.newFilesDropped = function(){
					$(".dropzone-info").remove();
				};
				$("#dropzone").dropzone({
					url : "http://localhost:8080/upload.php",
					printLogs : true,
					uploadRateRefreshTime : 500,
					numConcurrentUploads : 2
				});
				
			});
		</script>
	</head>
	<body>
		<div style="width: 250px;" >
			<div id="dropzone" style="background-color: aqua; width: 100%; height: 200px;" ></div>
			<div id="dropzone-info" style="width: 500px;" ></div>
		</div>
	</body>
</html>